<script setup lang="ts">
    import { computed } from 'vue';
    import { userLoginStore } from '@/stores/login';
    import { useUserStore } from '@/stores/user';
    import { ElMessageBox } from 'element-plus';
    
    const loginStore = userLoginStore();
    const userStore = useUserStore();

    const userInfo = computed(() => userStore.userInfo);

    /**
     * 确认注销
     */
    const confirmLogout = () => {
        ElMessageBox.confirm(
            '确认要退出当前登录吗？',
            '提示',
            {
                distinguishCancelAndClose: true,
                confirmButtonText: '确认退出',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            // 注销登录
            loginStore.logout()
        });
    }

</script>

<template>
    <el-popover
        placement="bottom-end"
        :width="230"
        :show-arrow="false"
        :teleported="false"
        trigger="click"
    >
        <template #reference>
            <slot></slot>
        </template>
        <div class="login_panel_box">
            <div class="login_box_top">
                <div class="user_icon">
                    <img :src="userInfo.avatar" />
                </div>
                <div class="main_on">
                    <span class="user_name"><a href='/u/111111111111' target="_blank">{{ userInfo.nickName }}</a></span>
                </div>
                <div class="main_down">
                    <span class="user_content">{{ userInfo.signature ? userInfo.signature : '这家伙很懒，什么都没有写...' }}</span>
                </div>
            </div>
            <div class="login_box_center">
                <ul class="number_board">
                    <li class="number_board_item">
                        <a :href="'/u/' + userInfo.yhnm + '#article_tab'">
                            <span class="number_board_value">{{ userInfo.tj_info?.article_num }}</span>
                            <div class="number_board_name">文章</div>
                        </a>
                    </li>
                    <li class="number_board_item">
                        <a :href="'/u/' + userInfo.yhnm + '#comment_tab'">
                            <span class="number_board_value">{{ userInfo.tj_info?.comment_num }}</span>
                            <div class="number_board_name">评论</div>
                        </a>
                    </li>
                    <li class="number_board_item">
                        <a :href="'/u/' + userInfo.yhnm + '#follow_tab'">
                            <span class="number_board_value">{{ userInfo.tj_info?.attention_num }}</span>
                            <div class="number_board_name">关注</div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="login_box_bottom">
                <ul class="busic_info">
                    <li class="busic-info-item">
                        <a href="/users/basicInfo" target="_blank">
                            <svg-icon href='#icon-user' width="25px" height="25px" fill="#298DF7"></svg-icon>
                            <span class="userCenter">个人中心</span>
                        </a>
                    </li>
                    <li class="busic-info-item">
                        <a href="/users/settings" target="_blank">
                            <svg-icon href='#icon-setting' width="25px" height="25px"></svg-icon>
                            <span class="accountSetting">账号设置</span>
                        </a>
                    </li>
                    <li class="busic-info-item" @click="confirmLogout">
                        <svg-icon href='#icon-logout' width="25px" height="25px"></svg-icon>
                        <span class="logOut">退出登录</span>
                    </li>
                </ul>
            </div>
        </div>
    </el-popover>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />